<template>
	<div class="list">
		<div class="title">违建列表</div>
		<div class="filter">
			<div>
				<span>发现时间</span>
				<el-date-picker value-format="YYYY-MM-DD" v-model="chooseDate" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" size="large" @change="changeDate" />
			</div>
			<div>
				<span>违建属地</span>
				<el-select v-model="queryParams.parameter.townCode" clearable placeholder="请选择" style="width: 600px">
					<el-option v-for="item in useIllegal.areaOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div>
				<span>详细地址</span>
				<el-input v-model="queryParams.parameter.placeAddress" style="width: 600px; height: 58px" placeholder="请输入地址" clearable />
			</div>
			<!-- <div>
				<span>违建类别</span>
				<el-select v-model="queryParams.parameter.twoNonType" clearable placeholder="请选择" style="width: 600px">
					<el-option v-for="item in useIllegal.typeOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div> -->
			<div>
				<span>处置状态</span>
				<el-select v-model="queryParams.parameter.dealStatus" clearable placeholder="请选择" style="width: 600px" @change="changeSelect">
					<el-option v-for="item in useIllegal.dealOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div class="filter-btn">
				<el-button @click="handleSearch">查询</el-button>
				<el-button @click="handleReset">重置</el-button>
			</div>
		</div>
		<div class="table" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)">
			<el-table
				class="custom-table"
				ref="dataTableRef"
				:data="pageData"
				height="764px"
				:row-style="rowStyle"
				:cell-style="cellStyle"
				highlight-current-row
				show-overflow-tooltip
				@row-click="handleRowClick"
				:header-cell-style="{ border: '1px solid rgba(27, 178, 224, 0.2)' }"
			>
				<el-table-column label="发现时间" prop="warningTime" min-width="17%" />
				<el-table-column label="违建属地" prop="townName" min-width="12%" />
				<el-table-column label="详细地址" prop="placeAddress" min-width="22%" />
				<!-- <el-table-column label="违建类别" prop="twoNonType" min-width="17%">
					<template #default="scope">
						<span>{{ useIllegal.twoNonType[scope.row.twoNonType] }}</span>
					</template>
				</el-table-column> -->
				<el-table-column label="处置状态" prop="dealStatus" min-width="17%">
					<template #default="scope">
						<span :style="'color:' + dealColor[scope.row.dealStatus]">{{ useIllegal.dealStatus[scope.row.dealStatus] }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="15%">
					<template #default="scope">
						<!-- <el-button type="primary" size="small" @click.stop="showDetail(scope.row.eventId)" style="font-size: 26px; height: 42px"> 调度 </el-button> -->
						<div class="diaoduBtn" @click.stop="handleRowClick(scope.row)">调度</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagenation">
			<el-pagination v-model:current-page="queryParams.pageNum" :page-size="10" background layout="->,total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
		</div>
		<el-dialog title="" v-model="dialogVisible" width="2300" align-center>
			<!-- <div class="closeBtn" @click="dialogVisible = false"></div> -->
			<Detail :detailId="detailId" :logId="logId" :dialogVisible="dialogVisible" />
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { getAreaList, getList } from '@/api/illegal'
import { useIllegalStore } from '@/store/modules/illegal'
import Detail from '../components/detail.vue'
const props = defineProps<{
	logType: Number
	areaType: string
	dateType: string
	nonType: string
}>()
const chooseDate = ref([])
const useIllegal = useIllegalStore()
const rowStyle = { height: '69px', background: 'transparent' }
const cellStyle = { border: '1px solid rgba(27, 178, 224, 0.2)', fontSize: '26px' }
const changeSelect = (val) => {
	console.log('change', val)
}
// const areaOptions = ref([])
// const twoNonType = useIllegal.twoNonType
// const dealStatus = ['处置中', '处置完成', '超期处置', '超期已完成']
const dealColor = ['rgba(251, 247, 13,1)', 'rgba(0, 180, 42, 1)', 'rgba(255, 125, 0, 1)', 'rgba(0, 180, 42, 1)']
const loading = ref(false)
// 筛选日期
const changeDate = (val: any) => {
	console.log('日期', chooseDate.value)
	queryParams.parameter.startTime = val[0]
	queryParams.parameter.endTime = val[1]
	console.log(queryParams)
}
// 分页
const total = ref(0)
// 切换每页显示条数
// const handleSizeChange = (val: number) => {
// 	console.log(`${val} items per page`)
// }
const handleCurrentChange = (val: number) => {
	// console.log(`current page: ${val}`)
	queryParams.pageNum = val
	getList(queryParams).then((res) => {
		pageData.value = res.data.list
		total.value = res.data.total
	})
}
const initialQuery = () => ({
	pageNum: 1,
	pageSize: 10,
	parameter: {
		startTime: '',
		endTime: '',
		townCode: '',
		placeAddress: '',
		twoNonType: '',
		dealStatus: null,
		eventTypeId: '44',
		areaCode: '510185',
	},
})
const queryParams = reactive(initialQuery())

// 系统配置表格数据
const pageData = ref([])
// 点击查询
const handleSearch = () => {
	loading.value = true
	getList(queryParams)
		.then((res) => {
			pageData.value = res.data.list
			total.value = res.data.total
			loading.value = false
		})
		.catch((err) => {
			ElMessage.error(err)
			loading.value = false
		})
}
// 点击重置
const handleReset = () => {
	Object.assign(queryParams, initialQuery())
	chooseDate.value = []
	loading.value = true
	getList(queryParams)
		.then((res) => {
			pageData.value = res.data.list
			total.value = res.data.total
			loading.value = false
		})
		.catch((err) => {
			ElMessage.error(err)
			loading.value = false
		})
}

// 弹窗
const detailId = ref()
const logId = ref()

const dialogVisible = ref(false)
const showDetail = (eventId, id) => {
	detailId.value = eventId
	logId.value = id
	dialogVisible.value = true
}
const handleRowClick = (row: any) => {
	showDetail(row.eventId, row.id)
}
onMounted(() => {
	// getAreaList()
	// 	.then((res) => {
	// 		const map = res.data
	// 		for (let item in map) {
	// 			areaOptions.value.push({ value: item, label: map[item] })
	// 		}
	// 	})
	// 	.catch((err) => {
	// 		ElMessage.error(err)
	// 	})
})
watch(
	props,
	(val) => {
		console.log('val', val)
		loading.value = true
		Object.assign(queryParams, initialQuery())
		chooseDate.value = []
		// console.log('logType', props)
		queryParams.parameter.dealStatus = props.logType
		queryParams.parameter.townCode = props.areaType || null
		queryParams.parameter.twoNonType = props.nonType || null
		// 处理时间
		if (val.dateType) {
			const sT = val.dateType + '-01'
			let month = parseInt(val.dateType.slice(-2)) + 1
			let year = parseInt(val.dateType.slice(0, 4))

			if (month == 13) {
				month = 1
				year = year + 1
			}
			let monthStr = month.toString()
			if (monthStr.length == 1) monthStr = '0' + monthStr
			const eT = year + '-' + monthStr + '-01'
			chooseDate.value[0] = sT
			chooseDate.value[1] = eT
			queryParams.parameter.startTime = sT
			queryParams.parameter.endTime = eT
			console.log(chooseDate.value)
		}
		getList(queryParams)
			.then((res) => {
				pageData.value = res.data.list
				total.value = res.data.total
				loading.value = false
			})
			.catch((err) => {
				ElMessage.error(err)
				loading.value = false
			})
	},
	{ immediate: true }
)
</script>
<style lang="scss" scoped>
.list {
	@include frame;
	color: white;
}
.filter {
	width: 2150px;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	justify-content: space-between;
	height: 136px;
	margin: 30px 0;
	font-size: 24px;
	span {
		margin-right: 15px;
	}
	&-btn {
		text-align: right;
		width: 711px;
		:deep(.el-button) {
			font-size: 24px;
			color: white;
			height: 100%;
			width: 120px;
			background: linear-gradient(180deg, rgba(27, 178, 224, 0.1) 0%, rgba(27, 178, 224, 0.4) 100%);
			border: 2px solid rgba(255, 255, 255, 0.8);
			box-shadow: 0px 0px 15px rgba(27, 178, 224, 1) inset;
		}
	}
}
.table {
	width: 100%;
	height: 764px;
}
.pagenation {
	width: 100%;
	text-align: right;
}
.el-pagination__total {
	color: white;
}
:deep(.el-pagination__goto) {
	color: white;
}
:deep(.el-pagination__classifier) {
	color: white;
}
:deep(.el-input__wrapper) {
	background-color: transparent;
	input {
		color: white;
		font-size: 22px;
	}
}
// 下拉框
:deep(.el-select__wrapper) {
	min-height: 58px;
	background-color: transparent;
	span {
		color: white;
		font-size: 22px;
	}
}
:deep(.el-range-separator) {
	color: white;
}
:deep(.el-date-editor) {
	width: 600px;
	height: 58px;
}

// 修改table样式
.custom-table {
	// border: 1px solid red;
	background-color: transparent;
	color: white;
	--el-table-border-color: none;
	font-size: 20px;
}
:deep(.el-table th) {
	background: #003352;
	color: rgba(27, 178, 224, 1);
	height: 74px;
	font-size: 24px;
}
:deep(.el-table__body tr.current-row > td) {
	background-color: rgba(255, 255, 255, 0.04) !important; /* 选中行背景色 */
	color: #fff; /* 选中行文字颜色 */
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
	background-color: rgba(255, 255, 255, 0.04) !important; /* hover背景色 */
}

:deep(.el-dialog) {
	// background-color: transparent !important;
	background-image: url('@/assets/images/illegal/background.png') !important;
	// background-size: cover;
	background-size: 100% 100%;
	height: 1012px;
	background-repeat: no-repeat;
	// border: 1px solid #77f8ef;
}
:deep(.el-popper.is-dark) {
	font-size: 30px;
}
.closeBtn {
	position: absolute;
	// border: 1px solid red;
	width: 120px;
	height: 45px;
	right: 5px;
	top: -5px;
}
</style>
<style lang="scss">
.el-button:active {
	background: linear-gradient(180deg, rgba(27, 178, 224, 0.1) 100%, rgba(27, 178, 224, 0.4) 0%) !important;
	color: rgba(27, 178, 224, 1) !important;
}
</style>
